<template>
	<div class="HDelegate">
		<ul class="nav">
			<li v-for="(item,index) in delegateMenu" :key='index' :class='{checked: navIndex == index}' @click="tagMenu(index)">{{item}}</li>
		</ul>
		<component :is="componentView"></component>
	</div>
</template>

<script>
import Buy from './children/buy'
import Sell from './children/sell'
import Delegate from './children/delegate'
import Confirm from './children/confirm'

var delegateMenu = ['买入','卖出','委托记录','确认记录']
export default {
	data(){
		return {
			navIndex: 0,
			delegateMenu,
			componentView:'buy'
		}
	},
	methods:{
		tagMenu(index){
			index = parseInt(index)
			if(index === 0){
				this.componentView = 'buy'
			}else if(index === 1){
				this.componentView = 'sell'
			}else if(index === 2){
				this.componentView = 'delegate'
			}else if(index === 3){
				this.componentView = 'confirm'
			}
			this.navIndex = index
			sessionStorage.navIndex = index
		}
	},
	created(){
		try{
			let navIndex = sessionStorage.navIndex
			this.navIndex = navIndex != "NaN" && navIndex != undefined ? sessionStorage.navIndex : 0;
			this.tagMenu(this.navIndex)
		}catch(e){

		}

		let status = this.$route.params.status;
		if(typeof status == 'string'){
			status = parseInt(status)
			this.tagMenu(status)
		}

	},
	components:{
		Buy,
		Sell,
		Delegate,
		Confirm,
	}
}
</script>


<style lang="scss" scoped>
@import '../../../assets/css/all';

.HDelegate{@include screen;
	.nav{display: flex;background-color:white;justify-content: space-around;
		li{text-align: center;line-height: 45px;font-size:16px;padding:0 10px;}
		li.checked{border-bottom: 2px solid #e86e50;color:#e86e50;}
	}
}
</style>
